<template>
	<xh-list-container
		ref="pageList"
		title="用户管理"
		:request="request"
		@clickAdd="handleClickAdd"
		:columns="columns"
		rowKey="userId"
	>
		<template v-slot="scope">
			<xh-list-item
				v-for="(item, index) in scope.data"
				:item-data="item"
				:index="index"
				:key="item.userId"
				:columns="columns"
				@click="handleClickDetail(item)"
				@clickBtns="handleClickBtns"
				:buttons="[
					{
						text: '编辑',
						key: 'edit',
						color: 'primary',
					},
					{
						text: '删除',
						key: 'delete',
						color: 'error',
					},
				]"
			/>
		</template>
	</xh-list-container>
</template>

<script>
import { deleteUser, getUserList } from '@/api/system/user';
import { mapGetters } from 'vuex';

const sexOptions = [
	{ text: '女', value: '0' },
	{ text: '男', value: '1' },
	{ text: '其他', value: '2' },
];
// 导入组件
export default {
	name: 'userManage',
	data() {
		return {
			request: getUserList,
			columns: [
				{ label: '用户编号', key: 'userId', isList: true },
				{
					label: '状态',
					key: 'status',
					valueMapList: [],
					isList: true,
				},
				{ label: '用户名称', key: 'userName', isList: true },
				{ label: '用户昵称', key: 'nickName', isList: true },
				{ label: '手机号', key: 'phonenumber', isList: true },
				{ label: '部门', key: 'deptName', search: false, isList: true },
				{ label: '邮箱', key: 'email' },
				{ label: '性别', key: 'sex', search: false, valueMapList: sexOptions },
				{ label: '创建时间', key: 'createTime', search: false },
			],
		};
	},
	onShow() {
		this.$refs.pageList?._query();
	},
	computed: {
		...mapGetters(['statusOptions']),
	},
	created() {
		// this.request = getUserList;
		this.columns[1].valueMapList = this.statusOptions;
		console.log('columns', this.columns);
	},
	methods: {
		handleDeleteItem(item, index) {
			const id = item.userId;
			this.$modal.confirm('确定删除吗？').then(() => {
				deleteUser(id).then(() => {
					this.$modal.msgSuccess('删除成功！');
					this.$refs.pageList?._query();
				});
			});
		},
		handleClickBtns(btnKey, item, index) {
			if (btnKey === 'delete') {
				this.handleDeleteItem(item, index);
			} else if (btnKey === 'edit') {
				const { ...rest } = item;
				this.$nav.navigateTo('/subSysManage/userManage/addEditForm', rest);
			}
		},
		handleClickAdd() {
			this.$nav.navigateTo('/subSysManage/userManage/addEditForm');
		},
		handleClickDetail(item) {
			this.$nav.navigateTo('/pages/detail/index', {
				...item,
				detailColumns: JSON.stringify(this.columns),
			});
		},
	},
};
</script>

<style scoped lang="scss"></style>
